<template>
	<view>
		<view class="header">
			<view class="title">{{audioName}}</view>
			<view class="time">
				<view style="width: 650rpx;">
					<slider activeColor="rgba(0, 0, 0, 1)" backgroundColor="rgba(212, 212, 212, 1)" :block-size="12"
						:max="durationTime" :value="currentTime" @change="sliderToPlay" @changing="sliderToPlay" />
				</view>
				<view class="flexbetween">
					<view>{{currentTime | formatTime}}</view>
					<view>{{durationTime | formatTime}}</view>
				</view>
			</view>
			<view class="bottomButton">
				<view class="left">
					<image src="../static/image/system/random.png" mode=""></image>
					<!-- <image src="../static/image/system/well.png" mode=""></image> -->
				</view>
				<view class="center">
					<view @click="playOrPause" v-if="playStatus">
						<u-icon name="pause-circle" color="rgba(102, 102, 102, 1)" size="28"></u-icon>
					</view>
					<view @click="playOrPause" v-else>
						<u-icon name="play-circle" color="rgba(102, 102, 102, 1)" size="28"></u-icon>
					</view>
				</view>
				<view class="right">
					x1.5
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import util from '@/common/unit.js';
	export default {
		name: "myaudio",
		data() {
			return {

			};
		},
		filters: {
			...util
		},
		methods: {
			...mapMutations([
				"destruction",
				"setCurrentPlayIndex"
			]),
			...mapActions([
				"init",
				"playOrPause",
				"PreOrNext",
				"sliderToPlay"
			]),
		},
		computed: {
			...mapState([
				"durationTime", "currentTime","playStatus"
			]),
			...mapGetters([
				"audioName"
			])
		},
		mounted() {
			this.init()
		},
		destroyed() {
			this.destruction()
		}
	}
</script>

<style lang="scss" scoped>
	slider {
		// width: 100%;
		margin: 0 10rpx;
	}

	.header {
		padding: 30rpx;
		background: #F2F2F2;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.time {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 20rpx;
		}

	}

	.bottomButton {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.left {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			padding: 5rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #000000;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
</style>